<template>
  <el-dialog
    class="billDetails"
    title="账单明细"
    :visible.sync="dialogVisible"
    width="50%"
    :before-close="handleClose"
  >
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column label="账单类型" width="180">
        <template slot-scope="scope">
            <span>{{getIdentity(scope.row)}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="金额" width="180">
        <template slot-scope="scope">
            <span class="link-type">{{getShowDeciemal(scope.row.offset)}}</span>
        </template>
      </el-table-column>
      <el-table-column label="时间">
        <template slot-scope="scope">
            <!-- {{ scope.row.time | parseTime('{y}-{m}-{d} {h}:{i}') }} -->
            <span>{{scope.row.createTime | parseTime('{y}-{m}-{d} {h}:{i}')}}</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" width="180">
        <template slot-scope="scope">
            <span class="link-type">{{getStatus(scope.row)}}</span>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      class='pagination'
      background
      @current-change="handleCurrentChange"
      layout="prev, pager, next"
      :total="total">
    </el-pagination>
  </el-dialog>
</template>


<script>
import {ajax} from '@/api';
import { parseTime } from '@/utils';
import {getToken} from "@/utils/auth";
import numberFormat from '@/api/numberFormat';
export default {
  name: "billDetails",
  data() {
    return {
      dialogVisible: false,
      total:1,
      tableData:[],
      params:{
        targetUserId:'',
        keyword:'',
        operateType:'',
        flowStatus:'',
        wealthType:'money',
        start:0,
        limit:10,
        token:getToken()
      }
    };
  },
  methods: {
    getStatus(data){
      return data.flowStatus.text;
    },
    getShowDeciemal(money){
      return numberFormat.showDecimal(money);
    },
    getIdentity(data){
      return data.operateType.text;
    },
    openBill(item){   //账单明细
        this.params.targetUserId = item.id;
        this.dialogVisible = true;
        this.getBill();
    }, 
    getBill(){
      ajax('userFlows',this.params).then((res) => {
          if(res.status === 200){
            this.total = res.data.total;
            this.tableData = res.data.data;
          }
        });
    }, 
    handleClose(done) {
      done();
    },
    handleCurrentChange(val){
      this.params.start = (val - 1) * this.params.limit;
      this.getBill();
    }
  }
};
</script>


<style lang="less" scoped>
.billDetails {
    .pagination{
        margin: 1rem 0;
        text-align: right;
    }
}
</style>
